<template>
  <div>
    <div ref="h1" style="height: 210px;"></div>
  </div>
</template>
<script>

import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 100
      },
      // 存放设备状态数据
      empData: []
    }
  },
  methods: {
    loadPie() {
      const piePlot = new Pie(this.$refs.h1, {
        appendPadding: 10,
        data:this.empData,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        color:['#FF6B6B', '#4ECDC4'],
        innerRadius: 0.6,
        label: {
          type: 'inner',
          offset: '-50%',
          content: '{value}',
          style: {
            textAlign: 'center',
            fontSize: 14,
          },
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: 'pre-wrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              fontSize: 18,
            },
            content: '设备总数5',
          },
        },
      });

      piePlot.render();
    },
    async getEmpData() {
      let res = await get('/dashboard/queryDeviceOnlineNumber');
      this.empData = res.data;
    }
  },
  async mounted() {
    await this.getEmpData();
    this.loadPie();

  }
}
</script>
<style lang="less" scoped></style>